{% extends "admin/dashboard.html" %}
{% block content %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻列表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0D2E88',
                        accent: '#FF7D00',
                        dark: '#1D2939',
                        light: '#F9FAFB',
                        sidebar: '#0F172A',
                        sidebarActive: '#1E293B'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .sidebar-link {
                @apply flex items-center p-3 text-gray-300 hover:bg-sidebarActive hover:text-white rounded-lg transition-colors duration-200;
            }
            .sidebar-link.active {
                @apply bg-sidebarActive text-white;
            }
            .card {
                @apply bg-white rounded-xl shadow-sm p-6 mb-6;
            }
            .table-data {
                @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500 border-b border-gray-200;
            }
            .table-header {
                @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200;
            }
        }
    </style>
</head>
<body class="font-sans text-dark bg-gray-50 p-6">
    <h1 class="text-2xl font-bold mb-4">新闻列表</h1>
    <a href="{{ url_for('admin_news_edit') }}" class="inline-block mb-4 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/80">添加新闻</a>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="table-header">标题</th>
                    <th scope="col" class="table-header">发布日期</th>
                    <th scope="col" class="table-header">操作</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for news in news_list %}
                <tr>
                    <td class="table-data">
                        <div class="font-medium text-gray-900">{{ news.title|truncate(30, True) }}</div>
                    </td>
                    <td class="table-data">{{ news.publish_date }}</td>
                    <td class="table-data">
                        <div class="flex space-x-2">
                            <a href="{{ url_for('admin_news_edit', id=news.id) }}" class="text-primary hover:text-primary/80">
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="{{ url_for('admin_news_delete', id=news.id) }}" class="text-red-500 hover:text-red-700">
                                <i class="fa fa-trash"></i>
                            </a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <!-- 分页 -->
    <div class="mt-6">
        {% if pagination.has_prev %}
            <a href="{{ url_for('admin_news_list', page=pagination.prev_num) }}" class="px-3 py-1 border rounded text-primary hover:bg-gray-100">上一页</a>
        {% endif %}
        {% if pagination.has_next %}
            <a href="{{ url_for('admin_news_list', page=pagination.next_num) }}" class="px-3 py-1 border rounded text-primary hover:bg-gray-100">下一页</a>
        {% endif %}
    </div>
</body>
</html>
{% endblock %}